<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="12">
        <div class="card-panel" @click="handleSetLineChartData('purchases')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="nested" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">当天预测总负荷：7480</div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="card-panel" @click="handleSetLineChartData('messages')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="example" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">当天实际总负荷：8700</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-tag>当天逐时负荷预测数据</el-tag>
        <div class="dgrid-content bg-purple-light2">
          <line-chart />
        </div>
      </el-col>
      <el-col :span="12">
        <el-tag>当月逐日负荷预测数据</el-tag>
        <div class="grid-content bg-purple-light2">
          <line-chart />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import LineChart from "./components/LineChart";
import LineChartBot from "./components/LineChartBot";
export default {
  name: "loadPrediction",
  components: {
    LineChart,
    LineChartBot
  }
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 22px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  border-style: solid;
  border-color: black;
  border-width: 3px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);

  &:hover {
    .card-panel-icon-wrapper {
      color: #fff;
    }

    .icon-people {
      background: #40c9c6;
    }

    .icon-message {
      background: #36a3f7;
    }

    .icon-money {
      background: #f4516c;
    }

    .icon-shopping {
      background: #34bfa3;
    }
  }

  .icon-people {
    color: #40c9c6;
  }

  .icon-message {
    color: #36a3f7;
  }

  .icon-money {
    color: #f4516c;
  }

  .icon-shopping {
    color: #34bfa3;
  }

  .card-panel-icon-wrapper {
    float: left;
    margin: 14px 0 0 14px;
    padding: 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
  }

  .card-panel-icon {
    float: left;
    font-size: 48px;
  }

  .card-panel-description {
    float: left;
    font-weight: bold;
    margin: 26px;
    margin-left: 0px;
    text-align: left;

    .card-panel-text {
      line-height: 38px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 22px;
      margin-left: 60px;
      text-align: left;
      margin-bottom: 12px;
    }

    .card-panel-num {
      font-size: 20px;
    }
  }
}
.bg-purple-light2 {
  background: #fff;
  height: 420px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  border-style: solid;
  border-color: black;
  border-width: 3px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
}
</style>
